<template>
  <div class="detail-n">
    <nav-bar>
      <img src="@/assets/images/common/back.svg" alt="" slot="left" class="detail-img" @click="imgClick">
      <div class="detail-nav" slot="center">
        <div v-for="(item, index) in detailData" 
              :class="{active: currentIndex === index}" 
              :key="index"
               class="detail-item"
               @click="detailClick(index)">
          {{item}}
        </div>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar'
export default {
  name: "DetailNavBar",
  props: {
    
  },
  components: {
    NavBar
  },
  data() {
    return {
      detailData: ['商品', '参数', '评论', '推荐'],
      currentIndex: 0
    }
  },
  methods: {
    detailClick(index) {
      // index = this.notLog
      this.currentIndex = index

      this.$emit('detailNavIndex', index)
    },
    imgClick() {
      this.$router.back()
    }
  }
}
</script>

<style>
.detail-n {
  position: relative;
  z-index: 9;
  background-color: white
}

.detail-nav {
  display: flex;
  font-size: 15px;
  /* z-index: 9; */
}

.detail-item {
  flex: 1;
  border-bottom: 0
}

.detail-img {
  position: absolute;
  top: 12px;
  left: 10px;
}

.active {
  color: red;
}
</style>